<!--
 * @Description: 项目管理-发起编辑项目-基本信息-项目配置
 * @Author gong
 * @create 2024/9/5 14:00
 -->
<!--setup-->
<script setup>
import { onMounted, getCurrentInstance, ref, inject } from 'vue'
import BaseTag from '@shared/base/base-tag/index.vue' // 公共标签组件
import SvgIcon from '@/components/svg-icon/index.vue' // 公共svg组件
import PreviewPage from './PreviewPage' // 预览债权证明
import { openModal } from '@shared/base/open'
import QRCode from 'qrcodejs2' // 二维码生成器
import { to } from 'sf-utils2'
import cfDebtTransferAgreementApi from '@/api/modules/cf-debt-transfer-agreement' // api接口
import { ElMessage } from 'element-plus'
import profile from '@root/profile' // 配置文件

const { proxy } = getCurrentInstance()
const props = defineProps({})
const emit = defineEmits([])

/* 状态 */
// 项目基础信息
const __projBaseInfo__ = inject('__projBaseInfo__') || {}
const formData = ref({}) // 表单数据
// 项目配置项集合
const configList = ref([
  {
    label: '还款通道',
    value: 'repayChnnl',
    key: '10'
  },
  {
    label: '用户结清证明',
    value: 'userSttlChnnl',
    key: '20'
  },
  {
    label: '债转证明',
    value: 'dbtQtyProve',
    key: '30'
  },
  {
    label: '征信授权',
    value: 'creditAuthorize',
    key: '40'
  }
])
const isDown = ref(false) // 现在按钮是否下拉

/* 方法 */
/**
 * 初始化数据
 */
const init = () => {
  formData.value = {
    repayChnnl: __projBaseInfo__.value.repayChnnl, // 还款通道
    userSttlChnnl: __projBaseInfo__.value.userSttlChnnl, // 用户结清证明
    dbtQtyProve: __projBaseInfo__.value.dbtQtyProve, // 债转证明
    creditAuthorize: __projBaseInfo__.value.creditAuthorize // 征信授权
  }
}

/**
 * 预览债转证明
 */
const onPreview = () => {
  openModal(
    PreviewPage,
    { prjId: __projBaseInfo__.value.id },
    {
      title: '预览债转证明',
      width: '400px',
      height: '680px',
      useDefaultButton: true,
      showFooter: false,
      onOk(modal) {
        modal.close()
      },
      onClose(modal) {
        modal.close()
      }
    }
  )
}

/**
 * 下载H5二维码
 * @constructor
 */
const downloadQrcode = () => {
  // 创建一个二维码容器
  const qrcode = document.createElement('div')

  // 当前环境下的地址
  let envPath = profile.zsamcH5Address || ''
  // 路径传参
  let path = `TransferNotice?projectCode=${__projBaseInfo__.value.prjCode}`
  // 获取输入的内容/地址链接
  let txt = `${envPath}/#/${path}`

  // 生成二维码
  let url = new QRCode(qrcode, txt)
  // 生成完成之后页面创建一个a元素最后实现下载
  let a = document.createElement('a')
  // 创建一个单击事件
  let event = new MouseEvent('click')
  // 获取图片路径
  a.href = url._el.querySelector('canvas').toDataURL('image/png')
  // 下载时名称
  a.download = __projBaseInfo__.value.prjName
  // 触发a的单击事件
  a.dispatchEvent(event)
}

/**
 * 下载小程序码
 */
const smallProCode = async () => {
  const [res, err] = await to(
    cfDebtTransferAgreementApi.downloadQRCode('小程序码.png', { prjId: __projBaseInfo__.value?.id })
  )
  if (err || res?.code !== 200) return ElMessage.error(res?.message || String(err))
  ElMessage.success('小程序码下载成功！')
}

/* 计算 */

/* 监听 */

/* 周期 */
onMounted(() => {
  init()
})

/* 暴露 */
defineExpose({
  $: proxy.$
})
</script>

<!--render-->
<template>
  <div class="page">
    <!-- 内容区 -->
    <div class="page-title">
      项目配置
    </div>
    <el-row :gutter="24">
      <el-col
        v-for="item in configList"
        :key="item.key"
        :span="8"
      >
        <div class="config-item">
          <div>{{ item.label }}</div>
          <div class="flex">
            <!--  如果是债转证明，已启动状态才展示 债转证明  -->
            <div
              v-if="item.key === '30' && !__projBaseInfo__.singleFileFlag && formData[item.value] === 'Y'"
              class="mr-16px flex items-center"
            >
              <el-dropdown
                popper-class="approval-config-dropdown"
                trigger="hover"
                @visible-change="(val) => (isDown = val)"
              >
                <el-button
                  link
                  type="primary"
                >
                  下载
                  <SvgIcon
                    v-if="!isDown"
                    svg="project/arrow-down"
                    size="12"
                    class="ml-4px"
                  />
                  <SvgIcon
                    v-else
                    svg="project/arrow-up"
                    size="12"
                    class="ml-4px"
                  />
                </el-button>
                <template #dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item>
                      <el-button
                        type="primary"
                        link
                        @click="downloadQrcode"
                      >
                        H5二维码
                      </el-button>
                    </el-dropdown-item>
                    <el-dropdown-item>
                      <el-button
                        type="primary"
                        link
                        @click="smallProCode"
                      >
                        小程序码
                      </el-button>
                    </el-dropdown-item>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
              <el-divider
                v-if="__projBaseInfo__.editDebtTraAgrFlag"
                direction="vertical"
              />
              <el-button
                v-if="__projBaseInfo__.editDebtTraAgrFlag"
                type="primary"
                link
                @click="onPreview"
              >
                预览
              </el-button>
            </div>
            <BaseTag
              :type="formData[item.value] === 'Y' ? 'green' : 'info'"
              class="text-14px font-400"
            >
              {{ formData[item.value] === 'Y' ? '已开通' : '已关闭' }}
            </BaseTag>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<!--style-->
<style scoped lang="less">
.page {
  padding: 16px 16px 0;
  background: @white;
  border-radius: 6px;

  .page-title {
    margin-bottom: 16px;
    font-weight: bold;
    color: #333;
  }

  .config-item {
    display: flex;
    padding: 18px 16px;
    margin-bottom: 24px;
    font-size: 14px;
    font-weight: 400;
    color: #666;
    background: #f9f9f9;
    border-radius: 4px;
    justify-content: space-between;
    align-items: center;
  }
}
</style>

<style lang="less">
.approval-config-dropdown {
  .ijep-dropdown-menu {
    .ijep-dropdown-menu__item:not(.is-disabled):hover,
    .ijep-dropdown-menu__item:not(.is-disabled):focus {
      background: #f9f9f9;
    }
  }
}
</style>
